<!--分区域-->
<template>
  <div class="pages-content">
    <div class="operation">
      <h2>标品总体情况</h2>
      <img class="logoBg" src="~@/assets/images/common/fiveG.png" alt="" />
    </div>
    <div class="tableBox">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border stripe ref="table" size="mini" :span-method="arraySpanMethod" id="table1">
        <el-table-column show-overflow-tooltip fixed prop="indexName" label="产品收入完成情况" class-name="local fixedColumn" min-width="120px"></el-table-column>
        <el-table-column show-overflow-tooltip fixed prop="completeSort" label="完成率排名" class-name="local fixedColumn" min-width="90px"></el-table-column>
        <el-table-column prop label="当月收入">
          <el-table-column show-overflow-tooltip class-name="right-money" prop="thisMonthIncome" label="本月收入（万元）" min-width="90px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="hbIncreaseRate" label="环比增长" min-width="90px"></el-table-column>
        </el-table-column>
        <el-table-column prop label="累计同比">
          <el-table-column show-overflow-tooltip class-name="right-money" prop="thisYearIncome" label="本年累计（万元）" min-width="90px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="lastYearIncome" label="上年累计（万元）" min-width="90px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="increaseAmt" label="增长额（万元）" min-width="90px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="tbIncreaseRate" label="同比增长" min-width="90px"></el-table-column>
        </el-table-column>
        <el-table-column prop label="集团年度预算完成情况">
          <el-table-column show-overflow-tooltip class-name="right-money" prop="thisYearBudget" label="集团预算（万元）" min-width="100px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="completeYearBudget" label="预算进度" min-width="100px"></el-table-column>
          <el-table-column show-overflow-tooltip class-name="right-money" prop="timeRate" label="时序进度" min-width="100px"></el-table-column>
          <el-table-column show-overflow-tooltip prop="gapOfBudgetLj" label="时序盈缺" min-width="120px"></el-table-column>
          <el-table-column show-overflow-tooltip prop="timeIncreaseAmt" label="时序盈缺增长额" min-width="120px"></el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <div class="pages-content-tips">
      <div class="text-block">
        <div class="text-block-item">
          标品“冲锋”行动累计收入{{thisYearTotal}}亿元。集团总体预算完成率 {{completeBudgetPer}}，时序进度 <span>{{completeTimePer}}</span>
        </div>
        <div class="text-block-item">
          完成率： <span style="color:red">{{completeRateLast}}</span> 仍需加快进度。
        </div>
        <div class="text-block-item">
          时序盈缺：重点关注 <span style="color:red">{{sxyqLast}}</span> 。
        
        </div>
      </div>
      <div class="echarts-block">
        <barCanvas :echartsObj="echartsObj"></barCanvas>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";

let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

import barCanvas from "./barCanvas";

export default {
  name: "fenqy",
  components: {
    barCanvas,
  },
  props: {
    areaList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        month: "",
      },
      accountInfo: "",
      tableLoading: false,
      count: "",
      month: "",
      tableData: [],
      echartsObj: {},
      completeRateLast:'',
      thisYearTotal:'',
      sxyqLast:'',
      completeTimePer:'',
      completeBudgetPer:''
    };
  },
  mounted(){
    const {month} = this;
    this.$refs.bracnva.init(month);
  },
  created() {
    this.init();
    this.getMaxAcctMonthByArea();
  },
  methods: {
    // 初始化
    init(month) {
      this.month = month;
  $budgetAPI.postCloudReportData(
        {
          month,
        },
        (res) => {
          this.tableData = res.content.standardList;
          this.completeBudgetPer = res.content.completeBudgetPer,
          this.completeRateLast = res.content.completeRateLast,
          this.sxyqLast = res.content.sxyqLast,
          this.thisYearTotal = res.content.thisYearTotal,
          this.completeTimePer = res.content.completeTimePer
           this.echartsObj = {
            xdata: res.content.monthList,
            barData: res.content.dataList,
            // lineData: res.content.completeRate.map((i) => parseFloat(i)),
          };
        }
      );
    },

    //获取当前时间
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y.toString() + MM.toString();
    },
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && this.count) {
        if (rowIndex % this.count === 0) {
          return {
            colspan: 1,
            rowspan: this.count,
          };
        } else {
          return {
            colspan: 0,
            rowspan: 0,
          };
        }
      }
    },
    //区域选择 返回ID和name
    areaChange(event) {
      // let temp = this.areaList.find(item => {
      //   return (item.areaId = event);
      // });
      // this.form.areaId = event;
      // this.form.areaName = temp.areaName;
    },
    //根据层级获取区域树
    // getCompanyByLvl() {
    //   $budgetAPI.getCompanyByLvl(
    //     {
    //       lvl: this.accountInfo.areaLvl,
    //       areaId: this.accountInfo.areaId
    //     },
    //     res => {
    //       if (res.code == 0) {
    //         this.areaList = res.content;
    //       } else {
    //         this.alertError(res);
    //       }
    //     },
    //     err => {}
    //   );
    // }
    getMaxAcctMonthByArea() {
      $budgetAPI.getMaxAcctMonthByArea(
        {},
        (res) => {
          if (res && res.code == 0) {
            this.form.month = res.content;
            this.init();
          }
        },
        (err) => {}
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-content {
  border: 1px solid #dee5f3;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .local {
    .cell {
      color: #000000;
      font-weight: 700;
    }
  }
  .xian {
    width: 100%;
    height: 10px;
    background-color: blue;
    margin: auto;
    margin-top: 18px;
    margin-bottom: 20px;
  }
  .operation {
    font-size: 16px;
    padding-bottom: 20px;
    position: relative;
    h2 {
      color: #fff;
      display: inline-block;
      background: #2f6eba;
      border-radius: 20px;
      padding: 5px 20px;
    }
    img {
      position: absolute;
      right: 20px;
      top: 0px;
    }
    justify-content: space-between;
    .daochu {
      float: right;
      .el-form-item__content {
        width: 200px;
        float: right;
        .el-button {
          float: right;
        }
      }
    }
  }
}

.pages-content-tips {
  display: flex;
  padding-top: 20px;

  .text-block {
    flex: 1;
    background-color: #f5f7fd;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    .text-block-item {
      // height: 25px;
      line-height: 25px;
    }
  }
  .echarts-block {
    flex: 1;
    min-height: 200px;
  }
}
</style>
